<template>
  <div class="addmaterial">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
<!--    内容开始-->
    <div class="content">
<!--      素材名称-->
      <div class="name borderBottom">
        <h3>素材名称</h3>
        <input v-model="name" type="text" placeholder="请输入素材名称（不超过25个字）" oninput="if(value.length>25)value=value.slice(0,25)">
      </div>
<!--      公开-->
      <div class="close borderBottom">
        <div class="closeTop">
          <h3>公开</h3>
          <div @click="closeIcon()">
            <img v-if="isCloseed" src="http://job.dayinyun.com/materialCloseIcon.png" alt="">
            <img v-else src="http://job.dayinyun.com/materialOpenIcon.png" alt="">
          </div>
        </div>
        <div v-if="!isCloseed" class="closeBottom">
          <div class="title">公开使用价</div>
          <div @click="reduce()" class="clickNum">-</div>
          <div class="totalNum">{{total | priceFilter}}<span> 元</span></div>
          <div @click="add()" class="clickNum">+</div>
        </div>
      </div>
<!--      素材-->
      <div class="picture">
        <h3>素材</h3>
<!--        上传图片-->
        <upload :type=type :videoType="videoType" @getUploadParam="getUploadParam" :material_path="cover"></upload>
      
      </div>
      <button @click="createMaterial()">{{buttontext}}</button>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader";
  import upload from "../../components/upload";
  import {ADDMATERIAL,MATERIALDETAILS} from "../../apis/mine";

  export default {
    name:"addmaterial",
    components:{
      commonHeader,
      upload
    },
    data() {
      return {
        title:"添加素材",
        type:5,
        isCloseed:true,
        total:0,
        name:'',
        material_path:'',
        videoType:'',
        buttontext:"完成创建",
        cover:""
      }
    },
    mounted() {
      this.videoType = this.$route.query.type*1==1?1:2
      if(this.$route.query.id!="")
      {
        this.materialDetails();
        this.buttontext="保存修改"
        this.title="编辑素材"
      }
    },
    methods:{
      // 返回
      goBack(){
        this.$router.back()
      },
      // 选择是否公开
      closeIcon(){
        this.isCloseed = !this.isCloseed
      },
      // 减
      reduce(){
        if(this.total*1<=0){
          this.$toast("最低为0！")
          return;
        }
        this.total--
      },
      // 加
      add(){
        this.total++
      },
      // 获取视频或者图片路径
      getUploadParam(item){
        this.material_path = item;

        console.log(this.material_path)
      },
      // 创建素材
      createMaterial(){
        this.addMaterial()
      },
      // 接口开始
      // 新增资源
      addMaterial(){
        let addMaterial = ADDMATERIAL
        let params = {
          "id": this.$route.query.id?this.$route.query.id:'',
          "name": this.name,
          "cover": this.videoType*1==1?this.material_path+'?vframe/jpg/offset/1': this.material_path,
          "is_public": this.isCloseed ? 1 : 2 ,
          "material_path": this.material_path,
          "material_type": this.videoType*1==1?'video':"picture",
          "money": this.isCloseed ? '' : this.total,
        }
        addMaterial(params).then(res=>{
          if(res.data.code*1===200){
            this.$router.push({name:'material'})
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 接口结束

       // 素材详情
      materialDetails(){
        let materialDetails = MATERIALDETAILS;
        let that=this;
        let params = {
          "id": this.$route.query.id?this.$route.query.id:'',
        }
        materialDetails(params).then(res=>{
          if(res.data.code*1===200){
            that.name=res.data.data.name;
            if(res.data.data.is_public==2){
                
                that.isCloseed=false;
                that.material_path=res.data.data.material_path;
                that.cover=res.data.data.cover;
                if(res.data.data.money=="免费")
                {
                    that.total=0;
                }
                else{
                    that.total=res.data.data.money;
                }
            }
            else{
               that.isCloseed=true
            }
          } else {
           
          }
        }).catch(error=>{
          console.log(error)
        })
      },
    },
    watch:{
      name(val){
        if(val.length*1>=25){
          this.$toast("不能超过25个字！")
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .addmaterial{
    width:100%;
    .content{
      width:100%;
      padding:1.2rem 0.3rem 0 0.3rem;
      box-sizing: border-box;
      .name{
        padding:0.3rem 0;
        box-sizing: border-box;
        h3{
          font-size: @fontSize34;
          font-family: @fontFamily400;
          font-weight: @fontWeight400;
          line-height: 0.7rem;
          color: #F5F5F5;
          margin-bottom:0.12rem;
        }
        input{
          width: 100%;
          padding: 0.12rem;
          box-sizing: border-box;
          background:#232323;
          font-size: @fontSize28;
          font-family:@fontFamily400;
          font-weight: @fontWeight400;
          color:#ffffff;
        }
      }
      .close{
        padding:0.3rem 0;
        box-sizing: border-box;
        .closeTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          h3{
            font-size: @fontSize34;
            font-family:@fontFamily400;
            font-weight: @fontWeight500;
            color:#ffffff;
          }
          img{
            width:1rem;
            height:0.5rem;
          }
        }
        .closeBottom{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-size: @fontSize28;
          font-family:@fontFamily400;
          font-weight: @fontWeight500;
          color:#999999;
          margin-top:0.26rem;
          .title{
            margin-right:0.2rem;
          }
          .clickNum{
            width:0.6rem;
            height:0.6rem;
            border-radius: 0.05rem;
            background: #232323;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: @fontSize40;
            font-family:@fontFamily400;
            font-weight: @fontWeight500;
            color:#ffffff;
          }
          .totalNum{
            width:1.64rem;
            height:0.6rem;
            border-radius: 0.05rem;
            background: #232323;
            margin:0 0.08rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: @fontSize28;
            font-family:@fontFamily400;
            font-weight: @fontWeight500;
            color:#999999;
            span{
              color:#ffffff;
              margin-left:0.04rem;
            }
          }
        }

      }
      .picture{
        padding:0.3rem 0;
        box-sizing: border-box;
        h3{
          font-size: @fontSize34;
          font-family:@fontFamily400;
          font-weight: @fontWeight500;
          color:#ffffff;
          margin-bottom: 0.12rem;
        }
      }
      .borderBottom{
        border-bottom:0.02rem solid #333333;
      }
      button{
        width: 6.9rem;
        height: 0.86rem;
        background: #FD0000;
        border-radius: 0.1rem;
        font-size: @fontSize36;
        font-family:@fontFamily400;
        font-weight: @fontWeight500;
        color:#ffffff;
        margin-top: 0.4rem;
      }
    }
  }

</style>
